/**
 * Created by jiangtao on 2017/5/27.
 */

import React , { Component } from 'react';

import connect from './../../../redux/connect';

import '../../../styles/pc/home.scss';

import { Link } from 'react-router-dom'

import Pagination from './../../../components/Pagination';

import CustomLink  from './../../../components/CustomLink';

class Home extends Component {

    constructor( props ){
        super();
        const { category , page } = this.getParams(props);
        this.category = category;
        this.page = page;
    }

    componentWillReceiveProps( nextProps){
        const { category , page } = this.getParams( nextProps );
        if( category != this.category || page != this.page ) {
            this.category = category;
            this.page = page;
            this.getData();
        }
    }

    render(){
        const { dataList , tabs } = this.props.homeReducer;
        return (
            <div data-id="main">
                 <div className="content">
                     <div className="tab-header clearfix">
                         { tabs.map(( val , index )=> {
                             const category = !!val.category ? val.category : "all";
                             return (
                                 <CustomLink
                                     className="tab"
                                     to={`/topcs/${category}/*`}
                                     key={index}
                                 >
                                     {val.name}
                                 </CustomLink>
                             )
                         })}
                     </div>
                     <ul className="list-content">
                         {dataList.map(( val , index )=> {
                             return(
                                 <li key={index} className="clearfix">
                                     <Link to="/" className="avatar pull-left">
                                         <img src={val.author.avatar_url}/>
                                     </Link>
                                     <div className="show-see pull-left">
                                         <span className="count-big">{val.reply_count}</span>
                                         <span> / </span>
                                         <span>{val.visit_count}</span>
                                     </div>
                                     <div className="title-box pull-left">
                                         <Link to={`/detail/${val.id}`}>{val.title}</Link>
                                     </div>
                                     <div className="pull-right end-show"></div>
                                 </li>
                             )
                         })}
                     </ul>
                     <div className="pa-navigation">
                         {!!dataList.length &&
                             <Pagination
                                 currentPage={ parseInt(this.page) || 1}
                                 category={this.category}
                             />
                         }
                     </div>
                 </div>
            </div>
        )
    }

    getData(){
        this.props.homeActions.getList({
            page:this.page == "*" ? 1 : this.page,
            tab:this.category,
            limit:40
        });
    }

    getParams( props ){
        const { match } = props;
        return match.params;
    }

    componentDidMount() {
        this.getData();
    }
}

import homeActions from './../../../redux/action/home';

export default connect({
    reducers:{
        homeReducer:"home"
    },
    actions:{
        homeActions:homeActions
    }
})(Home);
